{% extends "admin/base.html" %}

{% block body_attributes %}style="visibility:hidden"{% endblock %}

{% block heading %}
{% if page %}
  Editing: {{page.title}}
{% else %}
  Create Page
{% endif %}
{% endblock %}

{% block includes %}
  <script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
  <script type="text/javascript"
          src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/dojo/dojo.xd.js"
          djConfig="parseOnLoad:true,isDebug:false"></script>
  <script type="text/javascript">
    dojo.require('dijit.layout.ContentPane');
    dojo.require('dijit.layout.TabContainer');
    dojo.require('dijit.form.Button');
  </script>
  <script type="text/javascript">
    /**
     * Parses the arguments out of the URL
     * @return {Object} A dictionary of key/value pairs of the arguments
     */
    function getArgs() {
      var args = {};
      var nvPairs = document.location.search.slice(1).split('&');

      for (var i = 0, param; param = nvPairs[i]; i++) {
        var nvPair = param.split("=");
        var name = unescape(nvPair[0]);
        var value = unescape(nvPair[1]);
        args[name] = value;
      }
      return args;
    }

    /**
     * Sets the body to be visible.  Called onload.
     */
    function showBody() {
      dojo.style(dojo.body(), "visibility", "visible");
    }

    /**
     * Selects a tab based on the fragement selected by #.
     */
    function selectTab() {
      var mainTabs = dijit.byId('mainTabs');
      var tabName = document.location.hash.replace(/^#/,'');
      tabName += 'Tab';
      var tabToSelect = dijit.byId(tabName);

      if (tabToSelect) {
        mainTabs.selectChild(tabToSelect);
      }
    }

    /**
     * Determines if a message should be displayed based on the m parameter in
     * the URL.  This parameter is the id of the div containing the message.
     * The method edits the div by wrapping its contents with five span tags
     * which are needed by the CSS, making it visible, and setting up a fade-out
     * animation.
     */
    function showMessage() {
      var args = getArgs();
      var message_id = args['m'];
      if (message_id) {
        var message = dojo.byId(message_id);
        var messageSpan = dojo.doc.createElement('span');
        messageSpan.innerHTML = message.innerHTML;
        for (var i = 0; i < 4; i++) {
          var newSpan = dojo.doc.createElement('span');
          newSpan.appendChild(messageSpan);
          messageSpan = newSpan;
        }
        message.innerHTML = '';
        message.appendChild(messageSpan);
        dojo.addClass(message, 'message');
        message.style.visibility = 'visible';
        dojo.fadeOut({node: message_id, duration: 2000, delay:10000}).play()
      }
    }
    
    function createEditor() {
      var oFCKeditor = new FCKeditor('editorHtml');
      oFCKeditor.BasePath = "/fckeditor/";
      oFCKeditor.Config["CustomConfigurationsPath"] = "/static/js/fck_config.js";
      oFCKeditor.Height = 328;
      oFCKeditor.ToolbarSet = 'AESC_Toolbar';
      oFCKeditor.ReplaceTextarea();
    }

    dojo.addOnLoad(selectTab);
    dojo.addOnLoad(showMessage);
    dojo.addOnLoad(createEditor);
    dojo.addOnLoad(showBody);
  </script>
{% endblock %}

{% block content %}

<script type="text/javascript">
  function generate_name() {
    str = dojo.byId('id_title').value;
    str = str.replace(/ /g, '-');
    str = str.replace(/\W/g, '-');
    str = str.replace(/\-+/g, '-');
    dojo.byId('id_name').value = str.toLowerCase();
  }
</script>

{% if page %}
  <a href="{% url views.main.get_url page.path %}">View page</a> |
  <a href="{% url views.admin.delete_page page.key.id %}">Delete page</a>
  {% if is_superuser %}
    {% if not page.in_sidebar %}
  | <a href=" {% url views.admin.add_to_sidebar page.key.id %}">Add page to sidebar</a>
    {% endif %}
  {% endif %}
{% endif %}

<div id="mainTabs" dojoType="dijit.layout.TabContainer" style="margin-top:15px; width:100%; height:530px;">
<div dojoType="dijit.layout.ContentPane" title="Page Contents" style="padding:5px;">
  <form action="{% url views.admin.edit_page page.key.id %}"
        method="post"
        enctype="multipart/form-data"
        id="editForm">
    <table id="pageContentsTable">
    {% for field in form %}
      <tr>
        <td style="font-weight:bold;">{{ field.label_tag }}</td>
        <td>
          {{ field }}
          {% ifequal field.name "name" %}
            &nbsp; <span class="small"><a href="javascript:generate_name();">
              Complete from title</a></span>
          {% endifequal %}
          {% if field.help_text %}<br>{{ field.help_text }}{% endif %}
          {% if field.errors %}
            <br><span class="error">{{ field.errors }}</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </table>
    <textarea id="editorHtml" name="editorHtml">
      {{ page.content }}
    </textarea>
    <br />
    <script type="text/javascript">
      function submitContents() {
        dojo.byId('editForm').submit();
      }
    </script>
    <button dojoType="dijit.form.Button"
            onclick="javascript:submitContents();">
      Save Page
    </button>
  </form>
</div><!-- closing content pane -->


{% if page %}
<div id="filesTab" dojoType="dijit.layout.ContentPane" title="Attachments" style="padding:5px;">

  {% if files %}
  <div class="securityGroup">
    Current attachments:
    <ul style="list-style-type:none;">
    {% for file in files %}
      <li style="list-style-image:url({{file.icon}})">
      {% if file.url %}
        <a href="{{ file.url }}">
      {% else %}
        <a href="{% url views.main.get_url file.path %}">
      {% endif %}
          {{ file.name }}</a>
      &nbsp;
      <a href="{% url views.admin.delete_file page.key.id,file.key.id %}"
         title="delete {{file.name}}">
        <img src="/static/images/trash.gif"></a>
      {% if file.is_hidden %}
        <i>hidden</i>
      {% endif %}
    {% endfor %}
    </ul>
  </div>
  {% endif %}

  <script type="text/javascript">
  function attachUrl() {
    if (dojo.byId('urlInput').value != '') {
      dojo.byId('fileForm').submit();
    } else {
      alert('Please input a valid URL');
    }
  }
  </script>

  <form action="{% url views.admin.upload_file %}"
        method="post"
        enctype="multipart/form-data"
        id="fileForm">
    <input type="hidden" name="page_id" value="{{ page.key.id }}" />
    <div class="securityGroup">
      Upload a file: <br>
      <div style="padding-left: 40px; padding-top: 20px;">
        <input type="file" name="attachment"/ > <p>
        <input type="checkbox" name="hidden" /> &nbsp; Don't show file in attachments <br><br>
        <input type="submit" value="Upload" />
      </div>
    </div>
    <div class="securityGroup">
      Add a URL: <br>
      <div style="padding-left:40px; padding-top:20px;">
        <input type="text" id="urlInput" name="url" /> &nbsp;
        <input type="button" onclick="attachUrl();" value="Attach" />
      </div>
    </div>
  </form>
</div> <!-- closing content pane -->
{% endif %}

{% if page %}
<div id="securityTab" dojoType="dijit.layout.ContentPane" title="Security" style="padding:5px;">
<form action="{% url views.admin.edit_acl %}" method="post" id="securityForm">
  <input type="hidden" name="page_id" value="{{ page.key.id }}" />
<div id="pageSecurity">
  {% if acl_data.inherits_acl %}
  <h2>Security is inherited from "/{{ page.InheritsAclFrom.path }}"</h2>
  {% endif %}
  <div class="securityGroup">
    <div>
      Anyone can edit: <input type="checkbox"{% if page.acl.global_write %}
                              checked="checked"{% endif %} name="global_write"/>
    </div>
    <div>
      Anyone can read: <input type="checkbox"{% if page.acl.global_read %}
                              checked="checked"{% endif %} name="global_read"/>
    </div>
  </div>
  <div>
    <div class="securityGroup">
      <div class="aclExisting">
      Groups that can edit:
      <ul>
      {% for group in acl_data.group_write %}
        <li>{{ group }} - Remove <input type="checkbox" name="group_write_remove_{{ group.key.id }}" /></li>
      {% endfor %}
      </ul>
      </div>
      <div class="aclAdd">
        Add a group:
        <select name="group_write">
          <option value=""></option>
          {% for group in acl_data.groups_without_write %}
          <option value="{{ group.key.id }}">{{ group }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
    <div class="securityGroup">
      <div class="aclExisting">
      Groups that can read:
      <ul>
      {% for group in acl_data.group_read %}
        <li>{{ group }} - Remove <input type="checkbox" name="group_read_remove_{{ group.key.id }}" /></li>
      {% endfor %}
      </ul>
      </div>
      <div class="aclAdd">
        Add a group:
        <select name="group_read">
          <option value=""></option>
          {% for group in acl_data.groups_without_read %}
          <option value="{{ group.key.id }}">{{ group }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>
  <div>
    <div class="securityGroup">
      <div class="aclExisting">
        Users that can edit:
        <ul>
        {% for user_profile in acl_data.user_write %}
          <li>{{ user_profile }} - Remove <input type="checkbox" name="user_write_remove_{{ user_profile.key.id }}" /></li>
        {% endfor %}
        </ul>
      </div>
      <div class="aclAdd">
        Add a user:
        <input type="text" name="user_write" />
      </div>
    </div>
    <div class="securityGroup">
      <div class="aclExisting">
        Users that can read:
        <ul>
        {% for user_profile in acl_data.user_read %}
          <li>{{ user_profile }} - Remove <input type="checkbox" name="user_read_remove_{{ user_profile.key.id }}" /></li>
        {% endfor %}
        </ul>
      </div>
      <div class="aclAdd">
        Add a user:
        <input type="text" name="user_read" />
      </div>
    </div>
  </div>
</div>
<button dojoType="dijit.form.Button"
        onclick="javascript:saveSecurity();"
        style="margin-top:15px;">
  Save Security Settings
</button>
</form>
<script type="text/javascript">
function saveSecurity() {
  {% if acl_data.inherits_acl %}
    var message = 'You are about to change the security of a page that ' +
                  'is inheriting its security from a page above it in ' +
                  'the heirarchy.  Any subsequent changes to the parent ' +
                  'page will not be reflected on this page and all child ' +
                  'pages.  Are you sure you want to do this?';
    if (!confirm(message)) {
      return;
    }
  {% endif %}
  dojo.byId('securityForm').submit();
}
</script>
</div> <!-- closing content pane -->
{% endif %}
</div> <!-- closing tab container -->

<div id="msgChangesSaved" style="visibility: hidden;">
  Your changes have been saved
</div>
{% endblock %}
